<!--网页头部-->
<template>
  <!-- 头部 -->
  <div class="header">
    <div class="logo">
      <h1><router-link :to="{ name: 'home' }">LOGO</router-link></h1>
    </div>
    <div class="Cart_view">
      <HeaderCart />
      <HeaderSearch />
    </div>
    <div class="login_info">
      <span v-if="!user"
        >您好，请<router-link to="/login">登录</router-link> 免费<router-link to="/register"
          >注册</router-link
        ></span
      >
      <span v-else
        >欢迎您，{{ user.username }}，<a
          href="javascript:;"
          @click.prevent="logout"
          >退出登录</a
        ></span
      >
    </div>
  </div>
</template>

<script>
import HeaderCart from "@/components/HeaderCart";
import HeaderSearch from "@/components/HeaderSearch";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Header",
  components: {
    HeaderCart,
    HeaderSearch,
  },
  computed: {
    ...mapState("user", {
      user: "user",
    }),
  },
  created() {
    console.log(this.user);
  },
  methods: {
    ...mapMutations("user", ["deleteUser"]),
    logout() {
      this.deleteUser();
    },
  },
};
</script>

<style lang="css">
.header {
  width: 100%;
  display: flex;
}

.logo {
  height: 40px;
  flex: 1;
}

.logo h1 {
  margin: 0;
  padding: 0;
}

.logo h1 a {
  display: block;
  width: 70%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: red;
  border: 1px red solid;
  box-sizing: border-box;
}
.login_info {
  flex: 1;
  text-align: center;
  margin-top: 10px;
}

.Cart_view {
  flex: 3;
  overflow: hidden;
  margin-top: 3px;
}
</style>
